<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .logo{
        position:relative;
        margin-left: 300px;
    }
    .icon{
        position:absolute;
        left: 1070px;
        top:14px;
    }
    #logo{
        position: relative;
        margin-left:1020px;
        margin-top:-50px;
    }
    #logo li{   
        list-style-type: none;
        float: left;
        background-color:cyan;
        display:block;
        text-align: center;
        font-size: 10px;
        line-height: 30px;
        width:50px;
        
    }
    #logo li:hover{
        background: url("image/icon_count.png") no-repeat;
        
    }
    #menu{
        position:absolute;
        left: 268px;
        top:45px;
    }
    #menu li{
        list-style-type: none;
        float: left;
        line-height: 30px;
        font-size: 13px;
    }  
    #menu li a{
        background-image:  url("image/menuBg.jpg");
        text-align: center;
        text-decoration:none;
        color:white;
        height: 30px;
        width: 56.5px;
        margin: 0px;
        padding: 0px;
        display:block;  
    }
    .banner{
        position:relative;
        margin-left: 300px;
        margin-top:50px;
    }
    .rexiao{
        border:rgb(70, 238, 168) solid 1.5px;
        width: 958px;
        height: 450px;
        position:relative;
        margin-left:300px;
        margin-top:10px;        
    }
    .bg_bang{
        position:absolute;
        left: -13px;
        top:20px;
        
    }
    .bookNo1{
        position:absolute;
        left: 25px;
        top:130px;
        z-index: 10;
        
    }
    .book01{
        z-index: 5;
        position:relative;
        margin-top:150px;
    }
    .no1{
        list-style-type: none;
        position:relative;
        margin-left:220px;
        margin-top:-290px;
        line-height: 25px;
        font-size: 12px;
    }

    .bookNo2{
        position:absolute;
        left: 550px;
        top:130px;
        z-index: 10;        
    }
    .book02{
        position:absolute;
        left: 550px;
        top:150px;
        z-index: 5; 
    }
    .no2{
        list-style-type: none;
        position:relative;
        margin-left:630px;
        margin-top:-210px;
        line-height: 25px;
        font-size: 12px;
    }
    .bookNo3{
        position:absolute;
        left: 550px;
        top:280px;
        z-index: 10;        
    }
    .book03{
        position:absolute;
        left: 550px;
        top:300px;
        z-index: 5; 
    }
    .no3{
        list-style-type: none;
        position:relative;
        margin-left:630px;
        margin-top:20px;
        line-height: 25px;
        font-size: 12px;
    }
    span{
       position: relative;
       

    }
</style>
<body>
    <img class="logo" src="image/logo.jpg" width="101px" />
    <div id="logo">
        <ul>
            <li><l href="#">都看阅器</l></li>
            <li><l href="#">数字馆</l></li>
            <li><l href="#">当当优品</l></li>
            <li><l href="#">尾品汇</l></li>                
        </ul>      
    </div>
    <img class="icon" src="image/icon_count.png">
    <div id="menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">音像</a></li>
            <li><a href="#">童装</a></li>
            <li><a href="#">服装</a></li>
            <li><a href="#">运动</a></li>
            <li><a href="#">鞋靴</a></li>
            <li><a href="#">箱包</a></li>
            <li><a href="#">美妆</a></li>
            <li><a href="#">珠宝</a></li>
            <li><a href="#">家居</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">酒</a></li>
            <li><a href="#">手机</a></li>
            <li><a href="#">数码</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">家电</a></li>
        </ul>
    </div>
    <img class="banner" src="image/banner.png" width="960px" >
    <div class="rexiao">
        <img class="bg_bang" src="image/bg_bang.gif">
        <img class="bookNo1" src="image/bookNo1.gif">
        <img class="book01" src="image/book-01.jpg">
        <ul class="no1">
            <th>偷影子的人</th>
            <li>作者：[法]马克·李维（Mac Levy）著</li>
            <li>当当价：¥17.90元</li>
            <li>不知道姓氏的克蕾儿。这就是你在我生命里的角色，<br>我童年时的小女孩，今日蜕变成了女人，一段青梅竹<br>马的回忆，一个时间之神没有应允的愿望。一个老<br>是受班上同学欺负的弱小男孩，因为拥有一种特殊<br>能力而强大：他能“偷别人的影子”</li>
        </ul>
        <img class="bookNo2" src="image/bookNo2.gif">
        <img class="book02" src="image/book-02.jpg">
        <ul class="no2">
            <th>看见（央视知名记者、主持人柴静：十年个人<br>个人成长的高爆，中国社会变迁的备忘</th>
            <li>作者：柴静 著</li>
            <li>出版社：广西师范大学出版社</li>
            <li>¥29.40元 7.4折</li>
        </ul>
        <img class="bookNo3" src="image/bookNo3.gif">
        <img class="book03" src="image/book-03.jpg">
        <ul class="no3">
            <th>改变孩子先改变自己</th>
            <li>作者：贾容韬 贾毅 著</li>
            <li>出版社：作家出版社</li>
            <li>¥22.20元   7.4折</li>
        </ul>
    </div>
    <span style="text-align: center;display:block;">Copyright(C)当当网2004-2017，All Rights Reserved
    <img src="image/validate.gif" align="middle">
    京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
</body>
</html>